<template>
	<div class="gwc">
		<header>
			<button @click="go(-1)">
				<i class="el-icon-arrow-left"></i>
			</button>
			<h3>购物车</h3>
			<i class="el-icon-location-outline" style="margin-left: 0.3rem;"></i>
		</header>
		
		<div class="sp">
			
			<div class="nr" v-for="(item,i) in list">
				<input type="checkbox" :value="item.id" v-model="checklist" @change="CheckOne()" />
				<div class="fm">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`"/>
					<span>仅剩{{item.book.stock}}本</span>
				</div>
				<div class="cz">
					<header>
						<span>{{item.book.name}}</span>
					</header>
					<footer>
						<span>￥{{item.price}}</span>
						<div class="btn">
							<button @click="toggle(-1,i)">-</button>
							{{item.num}}
							<button @click="toggle(1,i)">+</button>
						</div>
					</footer>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<input type="checkbox" v-model="checkall"  @change="CheckAll()"/>全选
			<span>合计:￥{{SumPrice}}</span>
			<button @click="addOrder()">去结算({{checklist.length}})</button>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'MobileGwc',
		data() {
			return{
				checklist: [],
				checkall: false,
				list:[],
				shipInfo:[],
			}
		},
		computed:{
			SumPrice(){
				this.checklist = Array.from( new Set( this.checklist ) );
				let sum = 0;
				this.list.forEach( (item , i)=>{
					
					if( this.checklist.indexOf( item.id ) != -1 ){
						sum += item.price * item.num;
					}
				} )
				return sum.toFixed(2);
			}
		},
		methods:{
			go(i){
				this.$router.go(i);
			},
			toggle(i,x) {
				this.list[x].num = this.list[x].num + i;
				if(this.list[x].num < 1){
					this.list[x].num = 1;
				}
			},
			CheckOne(){
				this.checkall = this.checklist.length == this.list.length ? true : false;
			},
			CheckAll(){
				if( this.checkall ){
					this.list.forEach( (item,i)=>{
						this.checklist.push(item.id);
					} )
				}else{
					this.checklist = [];
				}
			},
			addOrder(){
				let order = [];
				for(let i = this.checklist.length - 1; i>= 0; i--){
					this.list.forEach((item,x)=>{
						if(item.id == this.checklist[i]){
							order.push(item)
							this.list.splice(x,1)
						}
					})
					this.checklist.splice(i,1)
				}
				
				let data = {
					ship2name : this.shipInfo.name,
					ship2phone : this.shipInfo.phone,
					ship2addr : this.shipInfo.addr,
					carts : order
				}
				
				let token = localStorage.getItem('token');
				token = "Bearer " + token;
				let h = {
					headers: {
						'Authorization': token,}}
				this.$postk('/api/fore/cart/add2Order',data,h).then((resp)=>{
					console.log(resp.data);
					alert('转为订单成功')
				})
			}
		},
		created() {
			let token = localStorage.getItem('token');
			token = "Bearer " + token;
			let h = {
				headers: {
					'Authorization': token,}}
					console.log(h);
			this.$get('/api/fore/cart/findMyCarts/',h).then((resp)=>{
				this.list = resp.data.data;
				this.$get('/api/user/shipInfo',h).then((rsp)=>{
					this.shipInfo = rsp.data.data;
				})
			})
		}
	}
</script>

<style scoped>
	.gwc{
		background-color: #f5d5a0;
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
	}
	.gwc header{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 1rem;
		margin-bottom: 1rem;
	}
	.gwc .footer{
		margin-top: 15rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
	}
	.gwc .footer span{
		margin-left: 1rem;
	}
	.gwc .footer button{
		width: 7rem;
		height: 3rem;
		border-radius: 5rem;
		background-color: red;
		color: white;
		border: none;
		margin-left: 7rem;
		margin-bottom: 0.3rem;
	}
	.gwc header button{
		border: none;
		background-color: #f5d5a0;
		position: absolute;
		top: 1;
		left: 0;
	}
	.sp{
		width: 95%;
		margin: 0 auto;
		border: 1px solid white;
		position: relative;
		top: 56px;
		height: 70%;
		overflow-x: hidden;
	}
	.bt{
		margin-left: 3rem;
	}
	.sp .nr{
		display: flex;
		margin-top: 1rem;
	}
	.fm{
		width: 30%;
		display: flex;
		justify-content: center;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		text-align: center;
		position: relative;
		border-radius: 0 0 0.6rem 0.6rem;
	}
	.sp .nr .fm img{
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}
	.sp .nr .fm span{
		font-size: 0.7rem;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角为圆角 */
		border-radius: 0 0 0.6rem 0.6rem;
	}
	.cz footer{
		margin-top: 7rem;
		margin-left: 2rem;
		display: flex;
	}
	.cz footer span{
		color: red;
	}
	.cz .btn{
		margin-left: 5rem;
	}
</style>